<template>
  <div id="apply" class="apply has-header has-menu">
    <it-header :from="false" :showAvatar="false" title="申请"></it-header>
    <div class="apply-approve columns is-gapless is-mobile">
      <div class="column is-half">
        <div class="myApplication v-middle">
          <i class="ion ion-ios-list-box-outline" aria-hidden="true"></i>
          <p>我申请的</p>
        </div>
      </div>
      <div class="column is-half">
        <div class="approved v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>我审批的</p>
        </div>
      </div>
    </div>
    <!-- 九宫格 -->
    <div class="nine-pane clearfix">
      <div class="pane-list border-b-1px border-r-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>请假</p>
        </div>
      </div>
      <div class="pane-list border-b-1px border-r-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>出差</p>
        </div>
      </div>
      <div class="pane-list border-b-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>加班</p>
        </div>
      </div>
      <div class="pane-list border-b-1px border-r-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>调班</p>
        </div>
      </div>
      <div class="pane-list border-b-1px border-r-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>迟到早退</p>
        </div>
      </div>
      <div class="pane-list border-b-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>漏打卡</p>
        </div>
      </div>
      <div class="pane-list border-b-1px border-r-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>外出</p>
        </div>
      </div>
      <div class="pane-list border-b-1px border-r-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>添加设备</p>
        </div>
      </div>
      <div class="pane-list border-b-1px">
        <div class="pane-list-content v-middle">
          <i class="ion ion-ios-checkmark-circle-outline" aria-hidden="true"></i>
          <p>手机解绑</p>
        </div>
      </div>
    </div>
    <it-menu></it-menu>
  </div>
</template>
<script>
export default {
  name: 'apply',
  data() {
    return {

    }
  }
}

</script>
<style lang="scss" rel="stylesheet/scss">
.apply {
  height: 100%;
  overflow: auto;
}
.apply-approve {
  color: #fff;
  height: 2rem;
  text-align: center;
  background-color: #38bfff;

  &>div {
    position: relative;
  }

  i {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .myApplication,
  .approved {
    width: 100%;
  }
}

.nine-pane {

}
.pane-list {
  float: left;
  position: relative;
  width: 33.3333333%;
  padding-top: 33.3333333%;
}
.pane-list-content {
  width: 100%;
  text-align: center;
  i {
    font-size: .6rem;
    margin-bottom: 5px;
  }
}





#apply .apply-approve {
  margin-bottom: 0;
}

</style>
